<template>
  <div>
    <el-dropdown class="avatar-container" trigger="click">
      <div class="name-wrapper">
        <span class="userName">{{ userInfo.userName }}</span>
        <i class="el-icon-caret-bottom"/>
      </div>
      <el-dropdown-menu slot="dropdown">
        <router-link to="/user/profile">
          <el-dropdown-item>个人中心</el-dropdown-item>
        </router-link>
        <el-dropdown-item @click.native="updatePwd">
          <span style="display:block;">修改密码</span>
        </el-dropdown-item>
        <el-dropdown-item divided @click.native="logout">
          <span style="display:block;">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>


    <!-- 修改密码对话框 start -->
    <el-dialog
      title="修改密码"
      :visible.sync="pwdDialogVisible"
      :close-on-click-modal="false"
      append-to-body
      width="500px">

      <el-form
        :model="passwordForm"
        :rules="passwordRules"
        ref="passwordRef"
        label-width="100px">
        <el-form-item label="原密码" prop="password">
          <el-input type="password" v-model="passwordForm.password" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input type="password" v-model="passwordForm.newPassword" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="确认密码：" prop="rePassword">
          <el-input type="password" v-model="passwordForm.rePassword" style="width: 200px" ref="rePasswordRef"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="pwdDialogVisible = false">取消</el-button>
        <el-button type="success" @click="updatePassword">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码对话框 end -->

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {updateUserPwd} from '@/api/system/user'

export default {
  name: 'Menu',
  components: {},
  computed: {
    ...mapGetters([
      'userInfo',
      'device'
    ])
  },
  data() {
    return {
      // 显示 / 隐藏修改密码对话框
      pwdDialogVisible: false,
      userWorkDayList: [],
      // 修改密码表单数据对象
      passwordForm: {},
      // 修改密码表单验证规则
      passwordRules: {
        password: [{required: true, message: "请输入原先密码", trigger: "blur"}],
        newPassword: [{required: true, message: "请输入新密码", trigger: "blur"}],
        rePassword: [{required: true, message: "请确认新密码", trigger: "blur"}]
      },
    }
  },
  methods: {
    // 退出登录
    async logout() {
      // 提示框
      const resultConfirm = await this.$confirm('是否退出登录？', '确认注销', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 判断是否退出登录
      if (resultConfirm !== 'confirm') return this.$message.info('取消操作')
      await this.$store.dispatch('user/logout')
      this.$router.push('/login')
    },
    // 打开修改密码对话框
    updatePwd() {
      this.pwdDialogVisible = true
    },
    updatePassword() {
      // 表单验证
      let valid = this.submitForm(['passwordRef'])
      if (!valid) return this.$message.info('完善表单')
      // 判断新密码是否一致
      if (this.passwordForm.rePassword !== this.passwordForm.newPassword) {
        this.$message.warning('两次输入的密码不相同')
        this.passwordForm.rePassword = ''
        this.$refs.rePasswordRef.focus()
        return
      }
      // 发起请求
      updateUserPwd(this.passwordForm).then(res => {
        this.pwdDialogVisible = false
        this.$message.success("更新密码成功")
      }).catch(err => {
        this.passwordForm = this.$options.data().passwordForm;
      })
    },
    // 格式化函数
    leaveDateFormatter(row, column) {
      let duration = row.leaveMinute;
      if (duration > 0) {
        return duration / 60;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.avatar-container {
  cursor: pointer;

  .name-wrapper {
    .userName {
      margin-right: 10px;
    }
  }
}

table {
  width: 100%;
  border-collapse: collapse;

  td {
    padding: 20px;
    height: 60px;
    min-height: 60px;
  }
}
</style>
